<template>
  <div style="height: 60px;width: 1500px"></div>
  <div style="  height: 80vh;
                width: 1200px;
                margin: 0 auto;
                background-color: white;">
    <el-row :gutter="20">
      <el-col  class="comment_div" :span="6" style="height: 80vh;border-right: darkgray solid 1px;overflow-y: auto">
        <div style="padding: 20px">
        <el-input
            v-model="input"
            class="w-50 m-2"
            size="large"
            placeholder="搜索联系人"
            :suffix-icon="Search"
            @click="handleSearch"
        />
      </div>
        <div v-for="item in 10" class="user_div" style="text-align: left;height: 80px;padding: 20px">

          <el-row :gutter="10">
            <el-col :span="4">
              <div>
                <el-avatar :size="50" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"/>
              </div>
            </el-col>
            <el-col :span="20">
              <div>
                <h3 style="margin-top: 5px">用户名</h3>
                <p>评论内容</p>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="18">
        <div style="height:30px;border-bottom: darkgray solid 1px;text-align: left;padding: 20px">
          <span style="font-size: 20px">用户名</span>
        </div>
      </el-col>
    </el-row>

  </div>


</template>

<script setup>
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
const input = ref('')

const handleSearch = () => {
  // 处理搜索逻辑
  console.log('Search clicked');
}
</script>

<style scoped>
a {
  text-decoration: none;
  color: #000;
  display: block;
}

.comment_text:hover {
  background-color: rgb(248,248,248);
}

.comment_div::-webkit-scrollbar{
  display: none;
}

.user_div:hover {
  background-color: rgb(248,248,248);
}


</style>